@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/**
  网格容器混合器
  $columns: 列数 
  $gap: 间隔 
  $grid-item-selector: 网格项选择器 
  $non-grid-item-selector: 非网格项选择器
**/
@mixin grid-container($columns: 3, $gap: 0px, $grid-item-selector: '& > div', $non-grid-item-selector: '.el-divider') {
  display: grid;
  grid-template-columns: repeat(#{$columns}, 1fr);
  justify-content: flex-start;
  align-items: center;
  gap: $gap;

  #{$non-grid-item-selector} {
    grid-column: 1 / -1;
  }

  #{$grid-item-selector} {
    grid-column: auto / span 1;
  }
}
